<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="70px">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入用户名称" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="loadData">搜索</el-button>
          <el-button @click="searchResetForm('form')"    >重 置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="primary" @click="add" size="small">添加</el-button>
        <el-button type="danger" @click="add" size="small">删除</el-button>
      </template>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          @selection-change="selectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
          />
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="50"
          />
        <el-table-column v-for="(item,index) in columnLists" :key="index" :prop="item.prop" :label="item.label" align="center" />
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              class="deleted"
              type="text"
              @click="del(scope.$index)"
            >
              删除
            </el-button>

            <el-button    type="text"  @click="changeMenu(scope.$index)">
              分配权限
            </el-button>
          </template>
        </el-table-column>
        </el-table>
        <Pagination :total="total" :current-page="pageNum" :page-size="pageSize" @handleChange="handleChange" />
    </el-card>
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="addVisible" width="45%">
      <el-form ref="formLabelAlign"  :model="formLabelAlign"   :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="角色名称" prop="name">
              <el-input  clearable  v-model="formLabelAlign.name" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="角色标识" prop="mark">
              <el-input clearable v-model="formLabelAlign.mark" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="角色描述" prop="context">
              <el-input
                clearable
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                style="resize:none;"
                v-model="formLabelAlign.context">
              </el-input>
            </el-form-item>
          </el-col>


        </el-row>

      </el-form>

      <span slot="footer"  >
          <el-button @click="saveRole('formLabelAlign')" type="primary" size="mini"  >确 定</el-button>
        	<el-button @click="resetUserForm('formLabelAlign')"  size="mini"  >重 置</el-button>
					<el-button  size="mini" @click="cancel('formLabelAlign')" type="danger">关 闭</el-button>
				</span>
    </el-dialog>

    <el-dialog title="菜单权限" :close-on-click-modal="false" :visible.sync="dialogVisible" width="20%">
      <el-tree
        ref="tree"
        :data="menuLists"
        show-checkbox
        node-key="id"
        :check-strictly="isCheck"
        :props="defaultProps"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelMenu">取 消</el-button>
        <el-button type="primary" size="mini" @click="saveMenu">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import Pagination from '@/components/Pagination'
import { getRoles, getMenus, saveRoleMenu,saveRole,del } from '@/api/role'
import { showData, resetForm, validate, fail, success } from '@/api/common'
import message from 'element-ui/packages/message'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      isCheck: true,
      form: { name: '' },
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      addVisible: false,
      columnLists: [
        { prop: 'name', label: '角色名称' },
        { prop: 'mark', label: '角色标识' },
        { prop: 'context', label: '角色描述' }
      ],
      type: 'role',
      selectRows: [],
      dialogVisible: false,
      menuLists: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      roleId: '',
      checkedKeys: [],
      checkStrictly: false,
      formLabelAlign:{
        id:'',
        name:'',
        mark:'',
        context:''
      },
      rules:{
        name:[
          { required: true, message: '请输入角色名称', trigger: 'change' }
        ],
        mark:[
          { required: true, message: '请输入角色标识', trigger: 'change' }

        ]
      },
      title:'',
      loading: true
    }
  },
  computed: {

  },
  created() {

  },
  mounted() {
    this.loadData()
  },
  methods: {
    del(index){
      this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(this.tableData[index].id).then(response=>{
          if(response.code===200){
            success(response.msg);
            this.loadData();
          }else{
            fail(response.msg);
          }
        })
      }).catch(() => {

      });
    },
    cancelMenu(){
      this.dialogVisible=false;
    },
    searchResetForm(formName){
      resetForm(this,formName);
      this.loadData();
    },
    saveRole(formName){
      if(validate(this,formName)){
         saveRole(this.formLabelAlign).then(response=>{
           if(response.code===200){
             this.loadData();
             this.addVisible=false;
             success(response.msg);
           }else{
             fail(response.msg);
           }
        })
      }
    },
    cancel(formName){

      resetForm(this,formName);

      this.addVisible=false;
    },

    add(){
      this.title='添加角色信息';
      this.addVisible=true;
      this.formLabelAlign.id='';
    },
    resetUserForm(formName){
      resetForm(this,formName);
    },
    handleSelectCheckedKey(){
      this.checkedKeys=this.$refs.tree.getCheckedKeys()
    },
    saveMenu() {
      const menuIds = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      console.log('menuIds', menuIds)
      if (menuIds.length === 0) {
        message('请勾选菜单', 'error')
        return false
      }
      const param = { id: this.roleId, menuIds: menuIds }
      saveRoleMenu(param).then(response => {
        if (response.code === 200) {
          this.dialogVisible = false
          success(response.msg)
        } else {
          fail(response.msg)
        }
      })
    },
    handleChange(pageNum, pageSize) {
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.loadData()
    },
    loadData() {
      this.form.pageNum = this.pageNum
      this.form.pageSize = this.pageSize
      getRoles(this.form).then(response => {
        showData(response, this)
        console.log(this.total)
      })
    },
    selectionChange(rows) {
      this.selectRows = rows
    },
    changeMenu(index) {
      this.roleId = this.tableData[index].id
      this.checkStrictly = true
      getMenus(this.roleId).then(response => {
        if (response.code === 200) {
          console.log('res', response.data)
          this.dialogVisible = true
          this.$nextTick(() => {
            this.menuLists = response.data.sysMenuResponseDTOList
            this.checkedKeys = response.data.menuIds
            this.$refs.tree.setCheckedKeys(response.data.menuIds)
            this.checkStrictly = false
          })

        } else {
          fail(response.msg);
        }
      })
    },
    edit(index) {
      this.addVisible=true;
      this.title='编辑角色信息';

      this.$nextTick(() => {
        this.formLabelAlign = Object.assign({}, this.tableData[index])
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }

  .deleted{
    color: red;
  }
  }
</style>
